<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex对齐方式对比演示（确保换行）</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        neutral: '#6B7280',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .flex-container {
                @apply w-full max-w-xs h-80 border-2 border-primary rounded-lg mb-6 p-2 transition-all duration-300;
            }
            .flex-item {
                @apply w-20 h-16 bg-accent text-white rounded-md flex items-center justify-center text-lg font-bold shadow-md transition-all duration-300;
            }
            .btn-active {
                @apply bg-primary text-white;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen p-4 md:p-8">
    <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-6 md:p-8">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center">Flex对齐方式对比演示</h1>
        
        <div class="mb-8">
            <p class="text-gray-600 mb-4">父容器宽度已缩小，确保子元素一定会换行，清晰展示区别：</p>
            <ul class="list-disc list-inside text-gray-600 space-y-2 pl-4">
                <li><strong>align-items</strong>：控制每行内部元素的对齐方式（看单个元素是否居中）</li>
                <li><strong>align-content</strong>：控制所有行作为整体的对齐方式（看多行整体是否居中）</li>
            </ul>
        </div>
        
        <!-- 控制按钮 -->
        <div class="flex flex-wrap gap-3 mb-8">
            <button id="default-btn" class="px-4 py-2 border rounded-md btn-active transition-all">默认 (无设置)</button>
            <button id="items-center-btn" class="px-4 py-2 border rounded-md transition-all">align-items: center</button>
            <button id="content-center-btn" class="px-4 py-2 border rounded-md transition-all">align-content: center</button>
            <button id="both-center-btn" class="px-4 py-2 border rounded-md transition-all">两者同时center</button>
        </div>
        
        <!-- Flex容器（缩小宽度确保换行） -->
        <div id="flex-demo" class="flex-container flex flex-wrap">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
            <div class="flex-item">5</div>
        </div>
        
        <!-- 说明 -->
        <div id="explanation" class="bg-gray-50 p-4 rounded-lg border border-gray-200">
            <h3 class="font-semibold text-gray-800 mb-2">当前状态：默认 (无设置)</h3>
            <p class="text-gray-600">父容器宽度较小，子元素已自动换行（共3行）。默认情况下：</p>
            <ul class="list-disc list-inside text-gray-600 mt-2 pl-2">
                <li>align-items: flex-start（每行元素靠上对齐）</li>
                <li>align-content: stretch（所有行拉伸填满容器高度）</li>
            </ul>
        </div>
    </div>

    <script>
        // 获取元素
        const flexDemo = document.getElementById('flex-demo');
        const explanation = document.getElementById('explanation');
        const buttons = {
            default: document.getElementById('default-btn'),
            itemsCenter: document.getElementById('items-center-btn'),
            contentCenter: document.getElementById('content-center-btn'),
            bothCenter: document.getElementById('both-center-btn')
        };
        
        // 重置所有按钮样式
        function resetButtons() {
            Object.values(buttons).forEach(btn => {
                btn.classList.remove('btn-active');
            });
        }
        
        // 设置默认状态
        function setDefault() {
            resetButtons();
            buttons.default.classList.add('btn-active');
            
            flexDemo.style.alignItems = 'flex-start';
            flexDemo.style.alignContent = 'stretch';
            
            explanation.innerHTML = `
                <h3 class="font-semibold text-gray-800 mb-2">当前状态：默认 (无设置)</h3>
                <p class="text-gray-600">父容器宽度较小，子元素已自动换行（共3行）。默认情况下：</p>
                <ul class="list-disc list-inside text-gray-600 mt-2 pl-2">
                    <li>align-items: flex-start（每行元素靠上对齐）</li>
                    <li>align-content: stretch（所有行拉伸填满容器高度）</li>
                </ul>
            `;
        }
        
        // 设置align-items: center
        function setItemsCenter() {
            resetButtons();
            buttons.itemsCenter.classList.add('btn-active');
            
            flexDemo.style.alignItems = 'center';
            flexDemo.style.alignContent = 'stretch';
            
            explanation.innerHTML = `
                <h3 class="font-semibold text-gray-800 mb-2">当前状态：align-items: center</h3>
                <p class="text-gray-600">每行的子元素在各自行内垂直居中，但3行整体仍拉伸填满容器：</p>
                <ul class="list-disc list-inside text-gray-600 mt-2 pl-2">
                    <li>每行内部的子元素垂直居中（看单个方块位置）</li>
                    <li>行与行之间的间距被拉开以填满容器</li>
                    <li>3行整体仍占据整个容器高度</li>
                </ul>
            `;
        }
        
        // 设置align-content: center
        function setContentCenter() {
            resetButtons();
            buttons.contentCenter.classList.add('btn-active');
            
            flexDemo.style.alignItems = 'flex-start';
            flexDemo.style.alignContent = 'center';
            
            explanation.innerHTML = `
                <h3 class="font-semibold text-gray-800 mb-2">当前状态：align-content: center</h3>
                <p class="text-gray-600">3行元素作为一个整体在容器中垂直居中，但每行内的子元素靠上对齐：</p>
                <ul class="list-disc list-inside text-gray-600 mt-2 pl-2">
                    <li>3行组成的整体在容器中垂直居中（看整体位置）</li>
                    <li>行与行之间保持均匀间距</li>
                    <li>每行内部的子元素仍靠上对齐（单个方块贴顶）</li>
                </ul>
            `;
        }
        
        // 同时设置两者为center
        function setBothCenter() {
            resetButtons();
            buttons.bothCenter.classList.add('btn-active');
            
            flexDemo.style.alignItems = 'center';
            flexDemo.style.alignContent = 'center';
            
            explanation.innerHTML = `
                <h3 class="font-semibold text-gray-800 mb-2">当前状态：两者同时center</h3>
                <p class="text-gray-600">结合了两种对齐方式的效果：</p>
                <ul class="list-disc list-inside text-gray-600 mt-2 pl-2">
                    <li>3行组成的整体在容器中垂直居中（整体位置居中）</li>
                    <li>每行内部的子元素也垂直居中（单个方块居中）</li>
                    <li>行与行之间保持均匀间距</li>
                </ul>
            `;
        }
        
        // 绑定事件
        buttons.default.addEventListener('click', setDefault);
        buttons.itemsCenter.addEventListener('click', setItemsCenter);
        buttons.contentCenter.addEventListener('click', setContentCenter);
        buttons.bothCenter.addEventListener('click', setBothCenter);
        
        // 初始化
        setDefault();
    </script>
</body>
</html>
